<script setup>
//详细未写-按时间范围查询还未写
import {
  Delete,
  Edit,
  Search,
} from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';

import { ref,onMounted } from 'vue';
import axios from 'axios';
const value = ref(true)
const list = ref([])
const total = ref(0)
const current =ref(1)
const size = ref(10)

const opname = ref('')
const moname =ref('')

//数据获取
const show = async ()=>{
  let res = await axios({
    url:"http://localhost:8080/operLog",
    params:{
      current:current.value,
      size:size.value,
      opname:opname.value,
      moname:moname.value
    }
  })
  list.value = res.data.data.records
  total.value = res.data.data.pages
}
onMounted(()=>{
  show()
})


const handleCurrentChange = (pageN)=>{
    current.value = pageN
    show()
}

const search = ()=>{
  show()
}
const over = ()=>{
  opname.value=''
  moname.value=''
  show()
}


// 详情

//详情
let isDial = ref(false)
let isDialList = ref('')
const isDials = (id)=>{
  isDial.value = true 
  isDialList.value = list.value[id-1]
  JSON.parse(isDialList.value.status)
  console.log(isDialList.value);
  
}




</script>

<template>
  <div>
    <table class="table-input" style="border-collapse: collapse; border: 1px ridge;width: 100%;height: 100px;">
      <!-- 搜索框 -->
      <el-row :gutter="15" class="input-row">
        <el-col :span="6">
          <el-form-item label=" 操作模块 " style="font-size: 20px;font-weight: 600;">
            <el-input placeholder="操作模块" v-model="moname"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label=" 操作人 " style="font-size: 20px;font-weight: 600;">
            <el-input placeholder="操作人" v-model="opname"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label=" 操作时间 " style="font-size: 20px;font-weight: 600;">
            <div class="block">
              <el-date-picker v-model="value2" type="datetimerange" start-placeholder="开始时间"
                end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd"
                time-format="A hh:mm:ss" />
            </div>
          </el-form-item>
        </el-col>

      </el-row>

      <el-row class="btn-row">
        <el-button type="primary" :icon="Search" @click="search" ><Span>搜索</Span></el-button>
        <el-button type="default" @click="over">重置</el-button>
      </el-row>

    </table>

  </div>






  <!-- 表格 --> 

  <el-table :data="list" border style="width: 100%" empty-text="暂无数据">
    <el-table-column prop="id" label="序号" width="70" />
    <el-table-column prop="title" label="系统模块" width="90" />
    <el-table-column prop="business_type" label="操作类型" width="100" />
    <el-table-column prop="request_method" label="请求方式" width="70" />
    <el-table-column prop="oper_name" label="操作人员" width="70" />
    <el-table-column prop="oper_ip" label="操作IP" width="150" />
    <el-table-column prop="method" label="请求方法"  />
    <el-table-column prop="status" label="操作状态" width="70" />
    <el-table-column prop="create_time" label="创建时间" width="150" />

    <el-table-column label="操作" width="100" v-slot="scoped">

        
      <el-link  type="primary" :underline="false" @click="isDials(scoped.row.id)">详情</el-link>

    </el-table-column>
  </el-table>


<el-pagination background layout="prev, pager, next" :page-count="total" @current-change="handleCurrentChange" />


<el-dialog v-model="isDial" title="详细" width="1100">
      <el-row>
        <el-col :span="10"
          >操作模块<span><b> {{isDialList.title}}</b></span></el-col
        >
      
      
        <el-col :span="10"
          >请求地址<span><b>{{isDialList.oper_url}}</b></span></el-col
        >
      </el-row>
      <el-row>
        <el-col :span="10"
          >登录信息<span><b>{{isDialList.oper_ip}}</b></span></el-col
        >
     
        <el-col :span="10"
          >请求方式<span><b>{{isDialList.request_method}}</b></span></el-col
        >
      </el-row>
      <el-row>
        <el-col :span="10"
          >操作方法<span><b>{{isDialList.method}}</b></span></el-col
        >
      </el-row>
      <el-row>
        <el-col :span="10"
          >请求参数<span><b>{{isDialList.operParam}}
            
          </b></span></el-col
        ></el-row>
        <el-row>
        <el-col :span="10"
          >返回参数<span><b>{{isDialList.jsonResult}}</b></span></el-col
        >
      </el-row>
      <el-row>
        <el-col :span="10"
          >操作状态<span><b>{{isDialList.status}}</b></span></el-col
        >
        <el-col :span="10"
          >操作时间<span><b>{{isDialList.create_time}}</b></span></el-col
        >
      </el-row>

    
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="isDial = false">
            关闭
          </el-button>
        </div>
      </template>
  </el-dialog>
 



</template>


<style scoped>
.el-pagination {
  margin-top: 20px;
}

.el-table {
  margin-top: 30px;
}

.demo-border .text {
  width: 15%;
}

.demo-border .line {
  width: 70%;
}

.demo-border .line div {
  width: 100%;
  height: 0;
  border-top: 1px solid var(--el-border-color);
}

.demo-border .line .dashed {
  border-top: 2px dashed var(--el-border-color);
}

.el-col {
  margin-top: 20px;
  margin-left: 10px;
}

.btn-row {
  margin-left: 10px;
  margin-bottom: 10px;
}

.btn-div {
  margin-top: 20px;
}

.table-btn {
  margin-top: 10px;
  margin-left: 10px;
}


</style>
